<script setup>
import { reactive } from 'vue'
import request from '@/utils/request'

const { proxy } = getCurrentInstance()

const emit = defineEmits(['close'])

const props = defineProps({
  // 控制弹窗
  isShow: {
    type: Boolean,
    default: false
  },
  // 后端所需id
  id: {
    type: String || Number,
    default: ''
  },
  //   接口地址
  url: {
    type: String,
    default: ''
  },
  //   是否是三个tabs
  isTabs: {
    type: Boolean,
    default: false
  },
  // 是否需要撤销按钮
  isRevoke: {
    type: Boolean,
    default: false
  }
})

// 表单
const ruleForm = reactive({
  executionOrder: 1,
  type: 1,
  ckId: 1, // 仓库id
  kqId: 1, // 库区id
  kwId: 1, // 库位id
  combinationName: '', // 库位信息
  id: '',
  inputValue: ''
})

// 接口返回信息i
const returnForm = reactive({
  placeholder: '请关联库位', // 站位提示
  docHandoverMethod: '', // 3 整单 2 批次 1 单个物料
  message: '', // 提示内容
  ckId: '', // 仓库id
  kqId: '', // 库区id
  kwId: '', // 库位id
  combinationName: '', // 库位信息
  quantityIdentification: '', // 计划量/实际量
  warehouseNumber: '' // 入库数量
})

// 提交
const submit = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.url) return proxy.errorMsg('请传入接口url!!!')
  ruleForm.id = props.id
  if (ruleForm.executionOrder == 2) {
    // 仓库id
    ruleForm.ckId = returnForm.ckId
    // 库区id
    ruleForm.kqId = returnForm.kqId
    // 库位id
    ruleForm.kwId = returnForm.kwId
    // 库位信息
    ruleForm.combinationName = returnForm.combinationName
  }

  const { data: res } = await request({
    url: '/storage' + props.url,
    method: 'POST',
    data: ruleForm
  })
  // 响应信息
  returnForm.message += `${res.message || ''}<br />`
  if (res.code == 500) return proxy.errorMsg(res.message)
  //  步骤1
  if (ruleForm.executionOrder == 1) {
    // 仓库id
    returnForm.ckId = res.ckId
    // 库区id
    returnForm.kqId = res.kqId
    // 库位id
    returnForm.kwId = res.kwId
    // 库位信息
    returnForm.combinationName = res.warehouseMessage
    returnForm.placeholder = '请扫描/输入物料条码'
  }

  // 计划/实际量
  returnForm.quantityIdentification = res.quantityIdentification
  // 入库数量
  returnForm.warehouseNumber = res.warehouseNumber
  // // 请求成功步骤 + 1
  ruleForm.executionOrder = 2
  // if (ruleForm.executionOrder > 2) ruleForm.executionOrder = 1
  ruleForm.inputValue = ''
}

// 撤销
const revoke = () => {}

// 关闭弹窗
const close = () => {
  for (let Key in returnForm) {
    returnForm[Key] = ''
  }
  for (let Key in ruleForm) {
    ruleForm[Key] = ''
  }
  emit('close')
}

watch(
  () => ruleForm.type,
  (val, load) => {
    if (val == 1) returnForm.placeholder = '请关联库位'
    if (val == 2) returnForm.placeholder = '请扫描库位信息'
    if (val == 3) returnForm.placeholder = '请扫描/输入物料条码'
    if (val != 3 && load != 3) {
      returnForm.docHandoverMethod = ''
      returnForm.ckId = ''
      returnForm.kqId = ''
      returnForm.kwId = ''
      returnForm.combinationName = ''
      returnForm.quantityIdentification = ''
      returnForm.warehouseNumber = ''
      ruleForm.ckId = ''
      ruleForm.kqId = ''
      ruleForm.kwId = ''
      ruleForm.combinationName = ''
      ruleForm.inputValue = ''

      ruleForm.executionOrder = 1
    } else {
      ruleForm.executionOrder = 2
    }
    ruleForm.type = val
  },
  {
    deep: true
  }
)
</script>
<template>
  <div class="app-container">
    <p-XiaoheDialog :dialogVisible="props.isShow" title="入库" @close="close" width="20%">
      <template #body>
        <div class="flex-items-center">
          <label>入库方式</label>
          <div class="flex-items-center">
            <div :class="ruleForm.type == 1 ? 'btns-av' : 'btns'" @click="ruleForm.type = 1">扫码入库</div>
            <div v-if="!props.isTabs" :class="ruleForm.type == 2 ? 'btns-av' : 'btns'" @click="ruleForm.type = 2">
              批次入库
            </div>
            <div :class="ruleForm.type == 3 ? 'btns-av' : 'btns'" @click="ruleForm.type = 3">库位撤销</div>
          </div>
        </div>
        <el-form label-width="80px" status-icon>
          <el-form-item label="库位信息">
            <el-input disabled v-model="returnForm.combinationName" />
          </el-form-item>
          <el-form-item label="输入栏">
            <el-input v-model="ruleForm.inputValue" @keyup.enter="submit" :placeholder="returnForm.placeholder" />
          </el-form-item>
        </el-form>
        <div style="width: 100%; margin-top: 10px">
          <div class="flex-between">
            <span
              >计划/实际量：{{
                returnForm.quantityIdentification == 'null' ? '返回为null' : returnForm.quantityIdentification
              }}</span
            >
            <span>入库数量{{ returnForm.warehouseNumber == 'null' ? '返回为null' : returnForm.warehouseNumber }}</span>
          </div>

          <div class="textarea" v-html="returnForm.message"></div>

          <div class="footer_btn">
            <div class="b">
              <el-button type="primary" @click="revoke">拣货撤销</el-button>
            </div>
          </div>
        </div>
      </template>
    </p-XiaoheDialog>
  </div>
</template>
<style lang="scss" scoped>
.footer_btn {
  margin-top: 20px;
  width: 100%;
}
.b {
  float: right;
}

.app-container ::v-deep .el-textarea__inner {
  height: 150px !important;
}
.flex-between {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.btns {
  color: #2e91fc;
  background-color: #fff;
}

.btns-av {
  color: #fff;
  background-color: #2e91fc;
}
.btns-av,
.btns {
  text-align: center;
  cursor: pointer;
  padding: 5px;
  width: 80px;
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 20px;
}
.flex-items-center {
  margin: 10px 0;
}

.textarea {
  height: 150px;
  border: 1px solid #dbdbdb;
  overflow: auto;
}
</style>
